<script setup lang="ts">
import { nextTick, reactive, ref, watch } from "vue";
import { newsHelpAdd, newsHelpEdit } from "@/services/newsApi.ts";
import JinDrawer from "@/components/framework/jin-drawer/jin-drawer.vue";
import type { FormRule } from "@/types/commonType.ts";
import { FormInstance, Message } from "@arco-design/web-vue";
import useFormSubmit from "@/hooks/useFormSubmit.ts";
import type { newsHelpEditType } from "@/types/newsType";
import AiEditorContent from "@/components/framework/AiEditorContent/AiEditorContent.vue";

const props = defineProps({
  title: String,
  dataType: Number,
});

const formRef = ref<FormInstance>();

const loading = ref(false);

const handleSubmit = useFormSubmit(formRef);

const editorRef = ref<{
  init: (value: string) => void;
  clear: () => void;
}>();

const emits = defineEmits<{
  (e: "list"): void;
}>();

const drawer = ref<{
  init: () => void;
  close: () => void;
}>();

const options = reactive({
  title: "",
  type: 0,
});

const formModel = reactive<newsHelpEditType>({
  id: "",
  question: "",
  answer: "",
  readOnly: "",
});

const rules = reactive<FormRule>({
  question: {
    required: true,
    message: "请输入问题",
  },
  answer: {
    required: true,
    message: "请输入答案",
  },
});

const handleCancel = () => {
  drawer.value?.close();
};

const promise = (url: any, msg: string) => {
  url
    .then((res: any) => {
      if (res.code === 200) {
        Message.success(msg);
        handleCancel();
        emits("list");
      }
    })
    .finally(() => {
      loading.value = false;
    });
};

const handleOk = () => {
  loading.value = true;
  const user = JSON.parse(JSON.stringify(formModel));
  if (options.type === 0) {
    delete user.id;
    promise(newsHelpAdd(user), "新增成功");
  }
  if (options.type === 1) {
    promise(newsHelpEdit(user), "修改成功");
  }
  if (options.type === 2) {
    loading.value = false;
    drawer.value?.close();
    return;
  }
};
const readOnly = ref(null);
const show = () => {
  editorRef.value?.clear();
  options.type = 0;
  formModel.question = "";
  formModel.id = "";
  formModel.answer = "";

  drawer.value?.init();
  loading.value = false;
  formRef.value?.clearValidate();
  nextTick(() => {
    formModel.readOnly = false;
    editorRef.value?.init('');
  });
};

const edit = (data: newsHelpEditType) => {
  editorRef.value?.clear();
  options.type = 1;
  formModel.question = data.question;
  formModel.id = data.id;
  formModel.answer = data.answer;
  loading.value = false;
  drawer.value?.init();
  formRef.value?.clearValidate();
  nextTick(() => {
    formModel.readOnly = false;
    editorRef.value?.init(data.answer);
  });
};

const getDetail = (data: newsHelpEditType) => {
  editorRef.value?.clear();
  options.type = 2;
  formModel.question = data.question;
  formModel.id = data.id;
  formModel.answer = data.answer;
  loading.value = false;
  drawer.value?.init();
  formRef.value?.clearValidate();
  nextTick(() => {
    formModel.readOnly = true;
    editorRef.value?.init(data.answer);
  });
};

defineExpose({
  show,
  edit,
  getDetail,
});
</script>

<template>
  <jin-drawer
    ref="drawer"
    :title="props.title"
    :width="600"
    @ok="handleOk"
    @cancel="handleCancel"
    @beforeOk="handleSubmit"
    :loading="loading"
    :ok-loading="loading"
  >
    <a-form
      auto-label-width
      :model="formModel"
      :rules="rules"
      ref="formRef"
    >
      <a-form-item
        label="问题"
        field="question"
      >
        <a-input
          v-model="formModel.question"
          allow-clear
          placeholder="请输入问题"
          :readonly="formModel.readOnly"
        />
      </a-form-item>

      <a-form-item
        label="答案"
        field="answer"
      >
<!--        <editor-content-->
<!--          ref="editorRef"-->
<!--          v-model="formModel.answer"-->
<!--          :readOnly="formModel.readOnly"-->
<!--        />-->
        <AiEditorContent style="height: 700px" ref="editorRef" v-model:content="formModel.answer" :readonly="!formModel.readOnly" placeholder=""/>
      </a-form-item>
    </a-form>

  </jin-drawer>
</template>

<style scoped lang="scss">
</style>
